<template>
  <div class="login_Box">
      <h1>CRM客户管理系统</h1>
      <h2>为了保证数据安全，请勿将账号密码给予他人</h2>
    <div class="content">
      <el-input v-model="name" placeholder="请输入用户名">
        <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
      </el-input>
      <el-input v-model="psw" placeholder="请输入密码" show-password>
        <i slot="prefix" class="el-input__icon el-icon-s-grid"></i>
      </el-input>
      <el-button type="primary" @click="login" >登录</el-button>
    </div>
  </div>
</template>

<script>
import {login} from "../api/api";
import {SETUSERINFO} from "../store/types";

export default {
  name: "login",// 不能是已存在的html标签
  data() {
    return {
      name: '',
      psw: ''
    }
  },
  methods: {
    login() {
      // 发送axios请求
      login({
        account: this.name,
        password: this.psw
      }).then(data => {
        // 登录成功后 把用户信息存储到vuex中
        if (data.code === 0) {
          this.$store.commit(SETUSERINFO, {
            userName:this.name,
            power:data.power
          });

          // 为了防止刷新vuex重置的问题 我们把数据存储到localStorage中
          localStorage.setItem('crmUserInfo',JSON.stringify({
            userName:this.name,
            power:data.power
          }))

          // 编程式导航 push replace 这两个函数的参数跟 router-link 的 to 属性的值一样
          // push 和 replace 的不同
          // push 会产生访问历史，也就是说他在当前页面进行了一次跳转
          // replace 不会产生访问历史，他就是把当前路径替换为了你写的路径
          // this.$router.replace('/')
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style  lang="less" >
  .login_Box {
    position: relative;
    width: 100%;
    height: 100%;
    background: #eee;
    h1,h2 {
      padding-top: 50px;
    }
    .content {
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 500px;
      height: 300px;
      padding: 30px;
      background: #fff;
      box-shadow: 5px 5px 10px #ccc;
      .el-input {
        width: 300px;
        margin: 30px auto 0;
        display: block;
      }
      button {
        width: 300px;
        margin: 30px 0;
      }
    }
  }
</style>